<template>
  <div class="custom-drag">
    <div draggable="true" class="item">1</div>
    <div draggable="true" class="item">2</div>
    <div draggable="true" class="item">3</div>
    <div draggable="true" class="item">4</div>
  </div>
</template>

<script>
export default {
  methods: {
    init() {
      const container = document.querySelector('.custom-drag')
      let node;
      container.ondragstart = e => {
        node = e.target
        e.dataTransfer.effectAllowed = 'move'
        setTimeout(() => {
          e.target.classList.add('moving')
        })
      }
      container.ondragover = e => {
        e.preventDefault()
      }
      container.ondragenter = e => {
        e.preventDefault()
        if (e.target === container || e.target === node) return
        const children = Array.from(container.children)
        const curIndex = children.indexOf(node)
        const toTargetIndex = children.indexOf(e.target)
        if (curIndex < toTargetIndex) container.insertBefore(node, e.target.nextElementSibling)
        else container.insertBefore(node, e.target)
      }
      container.ondragend = e => {
        e.target.classList.remove('moving')
      }
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
.custom-drag {
  .item {
    background-color: cornflowerblue;
    margin: 20px;
  }
  .moving {
    background-color: transparent;
    border: 1px dashed red;
  }
}
</style>